﻿@model TestOnlineProject.Models.Entities.User
@{
    ViewBag.Title = "Create";
}
<script type="text/javascript">
    $(document).ready(function () {
        $('.fileinput').fileinput();

        $('#FileUpload').bind('change', function() {
            var filename = $('#FileUpload').val();
            if (filename != "") {
                var extension = filename.replace(/^.*\./, '');
                if (extension == filename) {
                    extension = '';
                } else {
                    extension = extension.toLowerCase();
                }

                switch (extension) {
                case 'jpg':
                    break;
                case 'png':
                    break;
                case 'jpeg':
                    break;
                case 'gif':
                    break;
                default:
                    alert('Please select image file type jpg, png, jpeg or gif');
                    $('.fileinput').fileinput('reset');
                }
            }
        });
    });
    
    function validate() {
        var password = document.getElementById('Password');
        var reEnterPassword = document.getElementById('ReEnterPassword');
        if (password.value != reEnterPassword.value) {
            document.getElementById('ReEnterPassword_Message').innerHTML = "Confirm Password must be equal Password.";
            return false;
        }
        return true;
    }
</script>
<div class="site_map">
    @Html.ActionLink("Home", "Index", "Home", new { Area = "" }, new { }) / @Html.ActionLink("Users", "Index")
    / Create User
</div>
<br />
<div class="main_nav">
    <span>
        <a href="@Url.Content("~/User/Index")">
            <img src="@Url.Content("~/Images/back button.png")"/>
        </a>
    </span>
</div>
<br />
<span class="require_info">(*) is required.</span>
@using (Html.BeginForm("Create", "User", FormMethod.Post, new { enctype = "multipart/form-data", onsubmit = "return validate()" }))
{
    <span class="errorMsg">
        @Html.ValidationSummary(true)
    </span>
    <table class="table table-bordered">
        <tr>
            <td style="width: 150px; text-align: right">
                <span>Username (*)</span>
            </td>
            <td>
                <span class="errorMsg">@Html.ValidationMessageFor(model => model.Username)</span>
                @Html.TextBoxFor(model => model.Username)
            </td>
        </tr>
        <tr>
            <td style="width: 100px; text-align: right">
                <span>E-mail (*)</span>
            </td>
            <td>
                <span class="errorMsg">@Html.ValidationMessageFor(model => model.Email)</span>
                @Html.TextBoxFor(model => model.Email)
                <br/>
                <span>Example: testonlineproject@gmail.com</span>
            </td>
        </tr>
        <tr>
            <td style="width: 100px; text-align: right">
                <span>Password (*)</span>
            </td>
            <td>
                <span class="errorMsg">@Html.ValidationMessageFor(model => model.Password)</span>
                @Html.PasswordFor(model => model.Password, new { value = "" })
            </td>
        </tr>
        <tr>
            <td style="width: 100px; text-align: right">
                <span>Confirm Password (*)</span>
            </td>
            <td>
                <span class="errorMsg" id="ReEnterPassword_Message"></span>
                <input type="password" id="ReEnterPassword" />
            </td>
        </tr>
        <tr>
            <td style="text-align: right">
                <span>Full Name (*)</span>
            </td>
            <td>
                <span class="errorMsg">@Html.ValidationMessageFor(model => model.FullName)</span>
                @Html.TextBoxFor(model => model.FullName)
            </td>
        </tr>
        <tr>
            <td style="text-align: right">
                <span>Picture</span>
            </td>
            <td>
                <div class="fileinput fileinput-new" data-provides="fileinput">
                    <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                        <img data-src="holder.js/100%x100%" alt="..." src="~/Images/default_large.png" />
                    </div>
                    <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
                    <div id="selectPicture">
                        <span class="btn btn-default btn-file">
                            <span class="fileinput-new">Select image</span>
                            <span class="fileinput-exists" id="Change">Change</span>
                            <input type="file" name="FileUpload" id="FileUpload" title="Change picture" />
                        </span>
                        <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput" id="Remove">Remove</a>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td style="text-align: right">
                <span>Role (*)</span>
            </td>
            <td>
                <span class="errorMsg">@Html.ValidationMessageFor(model => model.RoleId)</span>
                @Html.DropDownList("RoleId")
            </td>
        </tr>
        <tr>
            <td style="text-align: right">
            </td>
            <td>
                <button class="btn" type="submit" style="width: 80px">Create</button>
                @Html.ActionLink("Reset", "Create", null, new { @class = "btn", style = "width:54px" })
                @Html.ActionLink("Cancel", "Index", null, new { @class = "btn", style = "width:54px" })
            </td>
        </tr>
    </table>
}